<template lang="pug">
  compontent(style="position:relative" :editor="editor" v-pluginIcon="functionJson" :is="pluginDefsInfo.renderComponent" v-if="componentShow&&pluginDefsInfo.renderComponent"  :config="pluginDefsInfo.config" :scope="scope")
</template>
<script>
import _ from 'lodash';
import pluginIcon from './pluginIcon';

export default {
  name: 'puliginDefsItem',
  props: ['pluginDefsInfo', 'siblings', 'editor', 'scope'],
  data() {
    return {
      componentShow: true,
      zgpluginMouseTarget: undefined,
      oldConfig: undefined,
      functionJson: {
        deleteDefs: this.deleteDefs,
        shareDefs: this.shareDefs,
        editDefs: this.editDefs,
        pluginDefsInfo: this.pluginDefsInfo,
      },
      flag: false,
    };
  },
  inject: ['configArea', 'rootForm', 'operaTemplateRoot'],
  computed: {
    interfaceParams() {
      if (this.pluginDefsInfo.config.interfaceParams) {
        return this.pluginDefsInfo.config.interfaceParams;
      } else {
        return null;
      }
    },
  },
  watch: {
    interfaceParams(val, old) {
      if (val !== old) {
        this.flag = true;
      }
    },
    'pluginDefsInfo.config': {
      handler: function(val, old) {
        if (this.flag === true) {
          this.flag = false;
          return;
        }
        if ('propertyName' in val) {
          this.rootForm.properties[val.propertyName] = undefined;
        }
        this.componentShow = false;
        this.$nextTick(() => {
          this.componentShow = true;
          this.oldConfig = _.cloneDeep(this.pluginDefsInfo.config);
        });
      },
      deep: true,
    },
    componentShow(val) {
      if (val) {
        if (
          this.operaTemplateRoot.chooseComponentId ===
          this.pluginDefsInfo.config.componentId
        ) {
          this.$nextTick(() => {
            this.$el.classList &&
              this.$el.classList.add('compontent-choose-active');
          });
        }
      }
    },
  },
  methods: {
    deleteDefs() {
      let index = this.siblings.indexOf(this.pluginDefsInfo);
      this.siblings.splice(index, 1);
      this.rootForm.deletePluginDefs(this.pluginDefsInfo);
    },
    shareDefs() {
      this.rootForm.sharePluginDefs(this.pluginDefsInfo);
    },
    editDefs() {
      this.rootForm.editPluginDefs(this.pluginDefsInfo);
    },
  },
  directives: {
    pluginIcon,
  },
  created() {
    this.oldConfig = _.cloneDeep(this.pluginDefsInfo.config);
    this.$watch(
      () => {
        return (
          this.operaTemplateRoot.chooseComponentId ===
          this.pluginDefsInfo.config.componentId
        );
      },
      v => {
        if (v) {
          this.$el.classList &&
            this.$el.classList.add('compontent-choose-active');
        } else {
          this.$el.classList &&
            this.$el.classList.remove('compontent-choose-active');
        }
      }
    );
    this.$watch(
      () => {
        return (
          this.operaTemplateRoot.optionHoverId ===
          this.pluginDefsInfo.config.componentId
        );
      },
      v => {
        if (v) {
          this.$el.classList &&
            this.$el.classList.add('compontent-hover-active');
        } else {
          this.$el.classList &&
            this.$el.classList.remove('compontent-hover-active');
        }
      }
    );
  },
};
</script>
<style lang="scss" scoped>
// 下面hover中的组件
.compontent-hover-active {
  box-sizing: border-box;
  border: 1px solid blue !important;
}

// 选中某个组件
.compontent-choose-active {
  box-sizing: border-box;
  border: 1px solid red !important;
}
</style>
